<template>
	<view class="container">
		<view class="example-body">
			<uni-steps :options="list" active-color="#8AB46C" :active='1' />
		</view>
		<view class="common_info">学业信息</view>
		<view class="group_item">
			<view class="group_title" style="width: 136upx;">
				<span style="color: red;">*</span>学历
			</view>
			<picker @change="bindEducationChange" :range="eduList" :value="userInfo.inputEducation">
				<view class="picker_class">{{userInfo.inputEducation}}</view>
			</picker>
		</view>
		<view class="group_item">
			<view class="group_title" style="width: 136upx;">
				<span style="color: red;">*</span>在校情况
			</view>
			<picker @change="bindSituationChange" :range="stuList" :value="userInfo.inputSituation">
				<view class="picker_class">{{userInfo.inputSituation}}</view>
			</picker>
		</view>
		<view class="group_item">
			<view class="group_title" style="width: 136upx;">
				<span style="color: red;">*</span>入学日期
			</view>
			<picker @change="bindInChange" mode="date" :value="userInfo.inputIn">
				<view class="picker_class">{{userInfo.inputIn}}</view>
			</picker>
		</view>
		<view class="group_item">
			<view class="group_title" style="width: 136upx;">
				<span style="color: red;">*</span>毕业日期
			</view>
			<picker @change="bindOutChange" mode="date" :value="userInfo.inputOut">
				<view class="picker_class">{{userInfo.inputOut}}</view>
			</picker>
		</view>
		<view class="hint_text">在校生填写预计毕业日期，毕业生填写实际毕业日期</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>学校名称
			</view>
			<input type="text" v-model="userInfo.inputSchName" placeholder="请输入学校名称" class="picker_class" />
		</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>学制
			</view>
			<input type="digit" v-model="userInfo.inputYear" placeholder="请输入学制" class="picker_class" />
		</view>
		<view class="hint_text">学制为整的录入阿拉伯数字，学制有半年的按小数录入</view>
		<view class="group_item">
			<view class="group_title" style="width: 136upx;">
				从业类别
			</view>
			<picker @change="bindWorkChange" :range="workList" :value="userInfo.inputWork">
				<view class="picker_class">{{userInfo.inputWork}}</view>
			</picker>
		</view>
		<view class="group_item">
			<view class="group_title" style="width: 270upx;">
				职业资格证书
			</view>
			<input type="text" v-model="userInfo.inputCertificate" placeholder="请输入证书名称" class="picker_class" />
		</view>
		<view class="hint_text">请填写职业资格证书；如：厨师三级</view>
		<!-- 防止按钮遮挡的空view -->
		<!-- <view style="height: 120upx;width: 100%;background: #FBFBFB;"></view> -->
		<button type="primary" class="button_class" @click="navTo('../conscription/applyFamily')">下一步</button>
		<!-- <button type="primary" class="button_class" @click="addUserInfo">保存</button> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					title: '基本信息',
					url:'../conscription/apply'
				}, {
					title: '学业信息',
				}, {
					title: '家庭信息'
				}, {
					title: '参军信息'
				}],
				userInfo: {
					inputEducation: "请选择学历",
					inputSituation: "请选择情况",
					inputIn: "请选择入学日期",
					inputOut: "请选择入学日期",
					inputSchName: "",
					inputYear: "",
					inputWork: "请选择从业类别",
					inputCertificate: "",
				},
				eduList: [
					"研究生", "一本", "二本", "三本", "专科", "高校新生", "普通高中", "初中", "其他"
				],
				stuList: [
					"在校生", "翌年毕业生", "应届毕业生", "往届毕业生"
				],
				workList: [
					"学生", "职工", "务家", "打工经商", "待业", "其他"
				]
			}
		},
		onLoad(option) {
			// console.log(option.item)
			// if (option) {
			// 	this.userInfo = JSON.parse(decodeURIComponent(option.item))
			// }
			// console.log(this.userInfo.inputName)
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			addUserInfo() {
				uni.navigateBack()
			},
			bindInChange(e) {
				this.userInfo.inputIn = e.detail.value
			},
			bindOutChange(e) {
				this.userInfo.inputOut = e.detail.value
			},
			bindEducationChange(e) {
				this.userInfo.inputEducation = this.eduList[e.detail.value]
			},
			bindSituationChange(e) {
				this.userInfo.inputSituation = this.stuList[e.detail.value]
			},
			bindWorkChange(e) {
				this.userInfo.inputWork = this.workList[e.detail.value]
			},
		}
	}
</script>

<style>
	page {
		background-color: #FBFBFB;
	}

	.container {
		width: 100%;
		background-color: #FBFBFB;
		overflow: hidden;
	}

	.example-body {
		position: fixed;
		width: 100%;
		padding: 16upx 0 16upx 0;
		font-size: 30upx;
		background-color: #fbfbfb;
		z-index: 99;
		box-shadow: 2upx 2upx 20upx rgba(0, 0, 0, 0.1);
	}

	.common_info {
		margin-top: 100upx;
		color: #fff;
		font-weight: bold;
		background: #8AB46C;
		width: 160upx;
		/* height: 50upx; */
		text-align: center;
		line-height: 60upx;
		font-size: 30upx;
		/* letter-spacing: 4upx; */
		border-radius: 0 30upx 30upx 0;
		box-shadow: 2upx 2upx 20upx rgba(0, 0, 0, 0.1);
	}

	.group_item {
		width: 100%;
		padding: 0upx 30upx;
		margin: 10upx 0;
		display: flex;
		flex-direction: row;
		background-color: white;
	}

	.group_item1 {
		width: 100%;
		padding: 10upx 30upx;
		margin: 10upx 0;
		background-color: white;
		overflow: hidden;
	}

	.group_title1 {
		width: 100upx;
		font-size: 30upx;
		font-weight: bold;
	}

	.group_title {
		width: 180upx;
		padding-top: 30upx;
		/* height: 100upx; */
		/* line-height: 100upx; */
		font-size: 30upx;
		font-weight: bold;
	}

	.picker_class {
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		margin-left: 30upx;
		font-size: 28upx;
		padding-left: 10upx;
	}

	.picker_content_class {
		width: 100%;
		height: 200upx;
		margin-top: 30upx;
		margin-left: 30upx;
		font-size: 28upx;
		padding-left: 10upx;
	}

	input {
		padding-left: 10upx;
	}

	.button_class {
		/* position: fixed; */
		/* bottom: 40upx; */
		margin-top: 20upx;
		margin-left: 10%;
		margin-bottom: 40upx;
		width: 80%;

		height: 80upx;
		line-height: 80upx;
		border-radius: 40upx;
		background-color: #8AB46C !important;
		color: white
	}

	.hint_text {
		color: #999;
		padding: 0 30upx;
		font-size: 24upx;
	}
</style>
